<template lang="html">
  <el-row type="flex" class="row-bg main" justify="space-between">
    <el-col class="left" :span="6">
      <div class="index-left-block">
        <h2>全部产品</h2>
        <div v-for="(product, key) of productList" :key="key">
          <h3>{{ product.title }}</h3>
          <ul>
            <li v-for="item of product.list" :key="item.id">
              <!-- <a :href="item.url">{{ item.name }}</a> -->
              <router-link :to="item.url">{{ item.name }}</router-link>
              <span v-if="item.hot" class="hot-tag">HOT</span>
            </li>
          </ul>
          <div v-if="!product.last" class="hr"></div>
        </div>
      </div>
    </el-col>
    <el-col class="right" :span="18">
      <div class="banner">
        <home-barner></home-barner>
      </div>
      <div class="project">
        <home-project></home-project>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import HomeBarner from './Banner'
import HomeProject from './Project'
export default {
  name: 'HomeMain',
  components: {
    HomeBarner,
    HomeProject
  },
  data () {
    return {
      productList: {
        pc: {
          title: 'PC产品',
          list: [
            {
              id: '001',
              name: '数据统计',
              url: 'http://starcraft.com'
            },
            {
              id: '002',
              name: '数据预测',
              url: 'http://warcraft.com'
            },
            {
              id: '003',
              name: '流量分析',
              url: 'http://overwatch.com',
              hot: true
            },
            {
              id: '004',
              name: '广告发布',
              url: 'http://hearstone.com'
            }
          ]
        },
        app: {
          title: '手机应用类',
          last: true,
          list: [
            {
              id: '01',
              name: '91助手',
              url: 'http://weixin.com'
            },
            {
              id: '02',
              name: '产品助手',
              url: 'http://twitter.com',
              hot: true
            },
            {
              id: '03',
              name: '智能地图',
              url: 'http://maps.com'
            },
            {
              id: '04',
              name: '团队语音',
              url: 'http://phone.com'
            }
          ]
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.main{
  width: 24rem;
  height: 13.2rem;
  margin: 0 auto;
}
.index-left-block {
  margin: 15px;
  background: #fff;
  box-shadow: 0 0 1px #ddd;
}
.index-left-block .hr {
  margin-bottom: 20px;
}
.index-left-block h2 {
  background: #4fc08d;
  color: #fff;
  padding: 10px 15px;
  margin-bottom: 20px;
}
.index-left-block h3 {
  padding: 0 15px 5px 15px;
  font-weight: bold;
  color: #222;
}
.index-left-block ul {
  padding: 10px 15px;
}
.index-left-block li {
  padding: 5px;
}
.right{
  padding-top: .3rem
}
.project{
  margin-top: .2rem;
}
</style>
